<!-- @format -->

<template>
  <SchemaWizard :schema="SCHEMA" :step="step">
    <template v-slot:afterForm>
      <BaseButton v-if="step > 0" @click="step--">Back</BaseButton>
      <BaseButton v-if="step < 1" @click="step++">Next</BaseButton>
    </template>
  </SchemaWizard>

  <pre>{{ userData }}</pre>
</template>

<script>
  import { ref, computed } from 'vue'
  import FormText from './components/FormText.vue'
  import FormSelect from './components/FormSelect.vue'
  import BaseButton from './components/BaseButton.vue'
  import { SchemaWizard, useSchemaForm } from 'formvuelate'

  const SCHEMA = [
    {
      firstName: {
        component: FormText,
        label: 'First Name',
      },
      lastName: {
        component: FormText,
        label: 'Last Name',
      },
    },
    {
      email: {
        component: FormText,
        label: 'Your email',
        required: true,
        config: {
          type: 'email',
        },
      },
    },
  ]

  export default {
    components: { BaseButton, SchemaWizard },
    setup() {
      const userData = ref({})
      useSchemaForm(userData)

      //   const schema = computed(() => {
      //     if (!userData.value.email) return SCHEMA

      //     return [
      //       { ...SCHEMA[0] },
      //       {
      //         ...SCHEMA[1],
      //         favoriteThingAboutVue: {
      //           component: FormSelect,
      //           label: 'Favorite thing about Vue',
      //           required: true,
      //           options: ['Ease of use', 'Documentation', 'Community'],
      //         },
      //       },
      //     ]
      //   })

      const step = ref(0)

      const formSubmit = () => {
        alert('Form submitted!')
      }

      return {
        userData,
        SCHEMA,
        // schema,
        formSubmit,
        step,
      }
    },
  }
</script>
